<template>
	<view class="">
		<uni-list>
			<uni-list-item title="头像" class="list">
				<template slot="footer">
					<uni-file-picker v-model="imageValue" limit="1" 
						:del-icon="false"
						:image-styles="imageStyles"
						return-type="array"
						:disable-preview="true"
						file-mediatype="image"
						@select="select" 
					    @success="success" 
					></uni-file-picker>
				</template>
			</uni-list-item>
			<uni-list-item title="昵称" clickable link :rightText="userInfor&&userInfor.userInfo&&userInfor.userInfo.nickname" @click="amend(0)"></uni-list-item>
			<uni-list-item title="手机号" clickable link :rightText="userInfor&&userInfor.userInfo&&userInfor.userInfo.mobile" @click="amend(1)"></uni-list-item>
		</uni-list>
		<uni-popup ref="popup" type="dialog">
			 <uni-popup-dialog mode="input" message="成功消息" :duration="2000" 
			 :before-close="true" 
			 @close="close" 
			 @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default{
		data(){
			return {
				imageValue:[],
				imageStyles:{
					width:64,
					height:64,
					border:{
						width:2,
						style:'dashed',
						radius:'2px'
					}
				}
			}
		},
		computed:{
			...mapGetters({
				userInfor:'user/info'
			})
		},
		methods:{
			...mapMutations({
				setUserInfo:'user/login'
			}),
			amend(index){
				console.log(index)
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(value) {
				// 输入框的值
				console.log(value)
				const db = uniCloud.database();
				db.collection('uni-id-users').where('_id==$env.uid').update({
					// #ifdef MP-WEIXIN
					nickName:value,
					// #endif
					// #ifndef MP-WEIXIN
					nickname:value,
					// #endif
				}).then(res=>{
					console.log(res)
					this.setUserInfo({nickname:value})
					this.$refs.popup.close()
				})
			},
			select(e){
				console.log(e)
			},
			success(e){
				console.log(this.imageValue)
				var avatar_file={
					extname:this.imageValue[0].extname,
					name:this.imageValue[0].name,
					url:this.imageValue[0].url,
					fileID:this.imageValue[0].fileID
				}
				console.log(avatar_file)
				const db = uniCloud.database();
				// 将上传的文件存到数据库中
				db.collection('uni-id-users').where('_id==$env.uid').update({
					avatar_file,
					avatar:avatar_file.url
				}).then(res=>{
					console.log(res)
					// 修改全局的用户信息
					this.setUserInfo({
						avatar_file,
						avatar:avatar_file.url
					})
				})
			}
		},
		onLoad() {
			console.log(this.userInfor)
			this.imageValue=this.userInfor?.userInfo?.avatar_file??[]
			
		}
	}
</script>

<style scoped>
	.list /deep/ .uni-list-item__container{
		align-items: center;
	}
</style>
